<template>
    <div>
        <div class="title space-between">
            <div class="dis-row">
                <el-icon>
                    <ArrowLeftBold />
                </el-icon>
                <div cllass="no-name">未命名章节</div>
                <img class="sheding-image left-1" src="@/assets/images/edit.png"></img>
            </div>

            <div>
                <img class="sheding-image sheding-image-1" src="@/assets/images/more-shu.png"></img>
            </div>
        </div>

        <div class="top">
            <div class="edit-now">
                编辑章节时，请勿以多个浏览器或多个分页编辑同个章节，避免编辑内容被覆盖
            </div>
        </div>

        <div class="edit-content">
            <!-- <textFu></textFu> -->
            <div class="space-between top-header">
                <div class="text-input-fu">
                    <div @click="jiaquAction">
                        <img class="sheding-image sheding-image-1" src="@/assets/images/jiaqu.png"></img>
                    </div>
                    <div class="xieti-1" @click="xietiAction">
                        <img class="sheding-image sheding-image-1" src="@/assets/images/xieti.png"></img>
                    </div>
                    <div @click="dakaiPicture">
                        <img class="sheding-image sheding-image-1" src="@/assets/images/photo.png"></img>
                    </div>
                </div>

                <div>
                    <el-button @click="saveAction()" v-if="saveShow" class="save-btn" loading>保存中</el-button>
                    <el-button @click="saveAction()" v-if="!saveShow" class="save-btn-1">立即保存</el-button>
                </div>
            </div>

            <div>
                <textarea class="textarea-input" :class="{ 'jiaqu': jiaquShow,'xieti': xietiShow}" v-model="wenbenyuFu"  :rows="52"></textarea>
            </div>
        </div>

        <el-dialog v-model="dialogFormVisible" title="编辑章节標題" center>
            <el-input class="input-zhangjie" :suffix-icon="Close" placeholder="请输入章节標題"></el-input>
            <div class="fenshu-box">
                5 / 65
            </div>  
            <el-button type="primary" class="enter-btn">确定</el-button>
        </el-dialog>

    </div>
</template>

<script setup>
import {
    ArrowLeftBold,
    Setting,
    EditPen,
    ArrowDown,  
    Sort,
    MoreFilled,
    View,
    Tickets,
    Close
} from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
const saveShow = ref(false)
const wenbenyuFu = ref('')
const jiaquShow = ref(false)
const xietiShow = ref(false)

const dakaiPicture = ()=>{
    
}
const xietiAction = ()=>{
    xietiShow.value = true
}
const jiaquAction = () => {
    jiaquShow.value = true
}
const saveAction = () => {
    if (saveShow.value) {
        saveShow.value = false
    } else {
        saveShow.value = true
    }
}

// import textFu from "@/components/textFu.vue";

const dialogFormVisible = ref(false)
const dataTime = ref()

</script>

<style lang="scss" scoped>
.xieti{
    // 让字体倾斜
    font-style: italic;
}
.textarea-input{
    width: 100%;
    border: 1px #e5e5e5 solid;
    border: none;
    text-indent: 1rem;
    line-height: 1.2rem;
    padding-top: 1rem;
}
.jiaqu {
    font-weight: 600 !important;
}

.save-btn-1 {
    border-radius: 3rem;
    border: none;
    background-color: #F9705D;
    color: white;
}

.save-btn {
    border-radius: 3rem;
    border: none;
}

.xieti-1 {
    margin: 0 1.5rem;
}

.edit-content {
    background-color: white;
}

.top-header {
    background-color: #F7FAFC;
    align-items: center;
    padding-right: 1.5%;
}

.text-input-fu {
    background-color: #F7FAFC;
    display: inline-flex;
    align-items: center;
    width: 98%;
    padding: 0 1%;
    padding-top: 1rem;
}

.sheding-image-1 {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.left-1 {
    position: relative;
    left: 0.4rem;
}

.edit-now {
    display: inline-flex;
    width: 100%;
    background-color: #EDF2F7;
    color: rgb(29, 171, 171);
    padding: 1rem 0;
    text-align: center;
    justify-content: center;
}

.enter-btn {
    width: 60%;
    background-color: #FA715D;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3rem;
    margin-left: 20%;
    border: none;
    padding: 1.2rem 0;
    margin-top: 1.3rem;
}

.fenshu-box {
    font-size: 0.8rem;
    color: #718096;
    margin-top: 1rem;
}

.edit-text {
    margin-left: 0.3rem;
}

/* 修改选中时的颜色 */
:deep(.el-radio-group) {
    --el-radio-checked-text-color: #FA715D;
    /* 选中文字颜色 */
    --el-radio-checked-input-border-color: #FA715D;
    /* 选中边框颜色 */
    --el-radio-checked-bg-color: #FA715D;
    /* 选中背景颜色 */
    --el-radio-checked-icon-color: #ffffff;
    /* 选中图标颜色 */
}

/* 或者直接覆盖样式 */
:deep(.el-radio.is-checked .el-radio__inner) {
    background-color: #FA715D;
    border-color: #FA715D;
}

:deep(.el-radio.is-checked .el-radio__label) {
    color: #FA715D;
}

.jiesuo-box {
    width: 90%;
    margin-left: 5%;
}

.duzhe-box {
    color: #718096;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.edit-right {
    color: #FA715D;
    font-size: 0.8rem;
}

.no-name {
    color: #718096;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.sheding-image {
    width: 1rem;
}

.title {
    display: flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 0.5rem;
    height: 4rem;
    background: #fff;

    .seat {
        width: 3rem;
        height: 100%;
        flex: 0 0 auto;
    }
}

.top {
    background: #fff;
    padding-left: 1rem;
    padding-right: 1rem;

    .con {
        width: 100%;
        max-width: 61.5rem;
        margin: 0 auto;
    }
}
</style>